<script lang="ts" setup>
const token = localStorage.getItem('token');
</script>


<template>
    <div class="header">

        <van-image
            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%8E%A8%E8%8D%90%E8%A7%86%E9%A2%91/u1923.svg"
            v-if="token" />
        <van-image
            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E8%A7%86%E9%A2%91_%E6%9C%AA%E7%99%BB%E5%BD%95/u234.svg"
            v-else></van-image>

        <van-tabs background="rgba(225,225,255,0)" color="rgba(225,225,255,0)" title-inactive-color="#ffffff99"
            title-active-color=white>
            <van-tab title="关注" name="a"></van-tab>
            <van-tab title="名胜" name="b"></van-tab>
            <van-tab title="推荐" name="c"></van-tab>
        </van-tabs>

        <span class="search">
            <span>
                <svg t="1731314478252" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4900" width="18" height="18">
                    <path
                        d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"
                        fill="#ffffff" p-id="4901"></path>
                </svg>
            </span>
            <span style="margin-left: 10px;">
                <svg t="1731314349762" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3500" width="18" height="18">
                    <path
                        d="M509.226667 167.722667l-222.442667 184.341333c-16.704 13.866667-43.178667 23.402667-64.896 23.402667H170.730667A42.666667 42.666667 0 0 0 128 418.090667v187.434666c0 23.466667 19.178667 42.624 42.730667 42.624H221.866667c21.802667 0 48.170667 9.536 64.896 23.402667l222.421333 184.32V167.744zM259.541333 704.426667c-9.045333-7.509333-25.770667-13.589333-37.674666-13.589334H170.730667A85.418667 85.418667 0 0 1 85.333333 605.525333v-187.434666A85.333333 85.333333 0 0 1 170.730667 332.8H221.866667c11.776 0 28.629333-6.08 37.674666-13.589333L519.125333 104.106667c18.090667-14.997333 32.746667-8.170667 32.746667 15.402666v784.64c0 23.488-14.677333 30.378667-32.746667 15.402667L259.562667 704.405333z m436.117334-4.821334a21.333333 21.333333 0 1 1-26.026667-33.834666A196.608 196.608 0 0 0 746.666667 509.504c0-57.408-29.269333-112.32-77.482667-151.637333a21.333333 21.333333 0 1 1 26.965333-33.066667C753.792 371.797333 789.333333 438.485333 789.333333 509.504c0 75.370667-35.050667 144.981333-93.653333 190.08z m64 170.666667a21.333333 21.333333 0 1 1-26.026667-33.834667A414.506667 414.506667 0 0 0 896 507.029333c0-121.642667-61.696-237.354667-162.816-319.829333a21.333333 21.333333 0 1 1 26.965333-33.066667C870.698667 244.309333 938.666667 371.776 938.666667 507.029333a457.173333 457.173333 0 0 1-178.986667 363.221334z"
                        fill="#ffffff" p-id="3501"></path>
                </svg>
            </span>
        </span>

    </div>

</template>

<style lang="scss" scoped>
.header {
    .van-image {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .van-tabs {
        position: absolute;
        top: 30px;
        left: 112px;
        width: 45%;
        --van-tab-font-size: 16px;
    }

    .search {
        position: absolute;
        top: 40px;
        right: 20px;

    }
}
</style>